<template>
  <el-dialog title="费用计划-查看" top="5vh" :visible.sync="feiYongJHShow" width="50%" :before-close="Close">
    <el-tabs v-model="activeName">
      <el-tab-pane label="内容" name="first">
        <div>
          <div class="tab1-header">
            <span class="wia">
              部门：
              <span>财务部</span>
            </span>
            <span class="wia">
              年度：
              <span>2020</span>
            </span>
          </div>
          <el-table :data="tableData" style="width: 100%" border show-summary :summary-method="getSummaries">
            <el-table-column label="序号" type="index" align="center" width="80"> </el-table-column>
            <el-table-column prop="name" label="费用科目"></el-table-column>
            <el-table-column prop="address" label="预算金额" align="right"></el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="评审意见" name="second">
        <v-pingshenyj :activities="activities" />
      </el-tab-pane>
      <el-tab-pane label="流程检视" name="third">
        <v-liuchengjs :dsadas="dsadas" />
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script>
import VPingshenyj  from '@/views/rfcwgl/components/pingShenYJ/index.vue'
import VLiuchengjs  from '@/views/rfcwgl/components/liuChengJS/index.vue'
export default {
  components: { VPingshenyj, VLiuchengjs },
  data() {
    return {
      feiYongJHShow: true,
      activeName: 'first',
      tableData: [
        {
          date: '2016-05-02',
          name: '餐费',
          address: '23.00'
        },
        {
          date: '2016-05-04',
          name: '住宿费',
          address: '600.32'
        },
        {
          date: '2016-05-01',
          name: '交通费',
          address: '300.00'
        },
        {
          date: '2016-05-03',
          name: '会议费',
          address: '12.00'
        }
      ],
      // 时间轴信息
      activities: [
        {
          time: '2018-04-15 08:30:20',
          operationState: '发起 张三 [已办理->部门负责人]',
          result: '同意',
          color: '#0bbd87'
        },
        {
          time: '2018-04-18 09:25:18',
          operationState: '部门负责人 李四 [已办理->公司负责人]',
          result: '同意',
          color: '#0bbd87'
        },
        {
          time: '2018-04-20 10:40:20',
          operationState: '公司负责人 王五 [已办理->结束]',
          result: '同意',
          color: '#0bbd87'
        }
      ],
      dsadas: [
        {
          operation: '发起',
          operationState: '张三 [已办理->部门负责人]',
          starttime: '2019-05-07 12:21',
          outtime: '2019-05-07 17:21'
        },
        {
          operation: '部门审批',
          operationState: '李四 [已办理->公司负责人]',
          starttime: '2019-05-07 18:21',
          outtime: '2019-05-07 20:21'
        },
        {
          operation: '公司审批',
          operationState: '王五 [已办理->结束]',
          starttime: '2019-05-07 22:21',
          outtime: '未完成'
        }
      ]
    }
  },
  methods: {
    Close(done) {
      this.$confirm('你确定要离开吗？')
        .then(_ => {
          this.feiYongJHShow = false
        })
        .catch(_ => {})
    },
    // 合计
    getSummaries(param) {
      const { columns, data } = param
      console.log(columns)
      console.log(data)
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        } 
        if (index === 1) {
          return
        }
        const values = data.map(item => Number(item[column.property]))
        // console.log(values)
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          sums[index] += ' 元'
        } else {
          sums[index] = ''
        }
      })

      return sums
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .lct .el-timeline{
  position: relative !important;
  width: 80% !important;
  margin: 3% auto 0px !important;
}
::v-deep .lct .el-card {
  background:#f8f8f8 !important;  
}
.tab1-header {
  font-size: 130%;
  // padding: 0px ;
  width: 50%;
  margin: 10px auto;
  .wia {
    margin-left: 16% !important;
  }
}
</style>